<template>
	<view class="progress-wrap" :style="{backgroundColor:bg,height:height+'rpx',borderRadius:radius+'rpx'}">
		<view class="progress-line" :style="{width:value*100+'%',height:height+'rpx',borderRadius:radius+'rpx',backgroundColor:lineColor}"></view>
	</view>
</template>
<script>
	export default{
		props:{
			value:'',
			height:{
				type:String,
				default:'10'
			},
			radius:{
				type:String,
				default:'7'
			},
			lineColor:{
				type:String,
				default:''
			},
			bg:{
				type:String,
				default:''
			}
		}
	}
</script>

<style lang="scss" scoped>
	.progress-wrap{
		position: relative;
		width: 100%;
		background-color:#F1F1F1;
	}
	.progress-line{
		position: absolute;
		left: 0;
		top:0;
		background:linear-gradient(90deg,rgba(255,133,7,1) 0%,rgba(231,64,74,1) 100%);
		transition: all linear 0.3s;
	}
</style>
